<template>
	<div class="sticker_con">
		<div class="sticker_item"
			v-for="(sticker_item, sticker_index) in stickerList" :key="sticker_index">
			<div :style="stickerConStyle">
				<div :style="stickerStyle(item, index)" v-for="(item, index) in sticker_item.list" :key="index">
					<img style="width: 100%; height: 100%;" :src="item.material_url" alt="" />
				</div>
			</div>
			<div class="operate_con">
				<span>贴纸_{{sticker_index + 1}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		computed,
		watch
	} from "vue";
	import {
		PlusOutlined,
		FormOutlined,
		DeleteOutlined,
	} from "@ant-design/icons-vue";
	import store from '@/store';
	export default defineComponent({
		props: {
			materialList: {
				type: Array,
				default: () => {
					return []
				}
			},
			radioType: {
				type: String,
				default: '9:16'
			}
		},
		components: {
			PlusOutlined,
			FormOutlined,
			DeleteOutlined,
		},
		setup(props, context) {
			const state = reactive({
				addVisible: false,
				stickerList: [],
			});
			
			const stickerConStyle = computed(()=>{
				return {
					position: 'relative',
					backgroundImage: `url('https://hf.pigcms.com/static/wxapp/images/phone_black_back.png')`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: 360/2 + 'px',
					height: props.radioType == '1:1'?360/2+'px':props.radioType == '16:9'?202.5/2+'px':640/2+'px'
				}
			})
			
			const stickerStyle = computed(() => {
				return function(item, index) {
					return {
						'position': 'absolute',
						'left': item.elLeft/2 + 'px',
						'top': item.elTop/2 + 'px',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'opacity': item.opacity,
						'display': 'flex',
						'align-items': 'center',
						'justify-content': 'center'
					}
				}
			})
			
			if(props.materialList?.length && props.materialList[0][0]?.originData){
				state.stickerList = props.materialList[0][0]?.originData
			}
			
			return {
				stickerConStyle,
				stickerStyle,
				...toRefs(state),
			};
		}
	});
</script>

<style lang="less" scoped>
	.sticker_con {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 30px;
		.sticker_item {
			background: #000;
			border-radius: 5px;
			width: 180px;
			min-height: 320px;
			margin-top: 30px;
			margin-left: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
	
			&:hover {
				.operate_con {
					.operate_icon {
						display: block;
					}
				}
			}
	
			.operate_con {
				position: absolute;
				width: 100%;
				height: 35px;
				display: flex;
				align-items: center;
				justify-content: center;
				left: 0;
				bottom: -35px;
				color: #333;
			}
		}
	}
</style>